<template>
    <el-container>
        <el-main>
        <el-row :gutter="8">
            <el-col :span="12">
                <el-card class="box-card3" shadow="always">
                  <div slot="header" class="clearfix">
                    <span style="float: left"><b>男女比例</b></span>
                  </div>
                  <div class="echarts">
                    <div id="mychart_sex" style="width: 580px;height:400px;"></div>
                  </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card3" shadow="always">
                  <div slot="header" class="clearfix">
                    <span style="float: left"><b>年龄分布</b></span>
                  </div>
                      <div class="echarts">
                        <div id="mychart_age" style="width: 580px;height:400px;"></div>
                      </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="8">
            <el-col :span="12">
                <el-card class="box-card3" shadow="always">
                  <div slot="header" class="clearfix">
                    <span style="float: left"><b>国籍分布</b></span>
                  </div>
                  <div class="echarts">
                    <div id="mychart_nationality" style="width: 500px;height:400px;"></div>
                  </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card3" shadow="always">
                  <div slot="header" class="clearfix">
                    <span style="float: left"><b>政治面貌分布</b></span>
                  </div>
                      <div class="echarts">
                        <div id="mychart_politicalFace" style="width: 580px;height:400px;"></div>
                      </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="8">
            <el-col :span="12">
                <el-card class="box-card3" shadow="always">
                  <div slot="header" class="clearfix">
                    <span style="float: left"><b>登录周期</b></span>
                  </div>
                  <div class="echarts">
                    <div id="mychart_internal" style="width: 500px;height:400px;"></div>
                  </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card3" shadow="always">
                  <div slot="header" class="clearfix">
                    <span style="float: left"><b>消费能力分析</b></span>
                  </div>
                      <div class="echarts">
                        <div id="mychart_consumeAbility" style="width: 550px;height:400px;"></div>
                      </div>
                </el-card>
            </el-col>
        </el-row>
        </el-main>
    </el-container>

  
</template>

<script>
export default {
    data(){
        return{
            // data_sex:[],
            // data_age:[],
        }
    },
    created(){
        var formdata_sex={
          'tag':'性别',
          'value':['男','女',],
           }
        
         var formdata_age={
          'tag':'年龄段',
          'value':['50后','60后','70后','80后','90后','00后','10后','20后'],
           }

           var formdata_politicalFace={
          'tag':'政治面貌',
          'value':['群众','党员','无党派人士',],
           }

           var formdata_job={
          'tag':'职业',
          'value':['学生','公务员','军人','警察','教师','白领','其它'],
           }
           var formdata_marriage={
          'tag':'婚姻状况',
          'value':['未婚','已婚','离异',],
           }
           var formdata_constellation={
          'tag':'星座',
          'value':['白羊座','金牛座','双子座','巨蟹座','狮子座','处女座','天秤座','天蝎座','射手座','摩羯座','水瓶座','双鱼座'],
           }
           var formdata_nationality={
          'tag':'国籍',
          'value':['中国大陆','中国香港','中国澳门','中国台湾','其它',],
           }
           var formdata_internal={
          'tag':'消费周期',
          'value':['7日','2周','1月','2月','3月','4月','5月','6月'],
           }
           var formdata_consumeAbility={
          'tag':'消费能力',
          'value':['高','超高','低','中','中下','中上','很低'],
           }
           var formdata_perTicketSales={
          'tag':'客单价',
          'value':['1-999','1000-2999','3000-4999','5000-9999',],
           }
           var formdata_paymentCode={
          'tag':'支付方式',
          'value':['支付宝','微信','储蓄卡','信用卡'],
           }
           var formdata_max_Amount={
          'tag':'单笔最高',
          'value':['1-999','1000-2999','3000-4999','5000-9999',],
           }
           var formdata_purchasefrequency={
          'tag':'购买频率',
          'value':['高','中','低'],
           }
           var formdata_returnRate={
          'tag':'退货率',
          'value':['高','中','低'],
           }
           var formdata_exchangeRate={
          'tag':'换货率',
          'value':['高','中','低'],
           }
           var formdata_customerServiceFrequency={
          'tag':'客服咨询频率',
          'value':['高','中','低'],
           }
           var formdata_lastLogin={
          'tag':'最近登录',
          'value':['1天内','7天内','14天内','30天内','一个月以上',],
           }
           var formdata_loc_url={
          'tag':'浏览页面',
          'value':['登录页','首页','分类页','商品页','我的订单页',],
           }
           var formdata_browseTime={
          'tag':'浏览时长',
          'value':['1分钟内','1-5分钟','5分钟以上',],
           }
           var formdata_frequency={
          'tag':'访问频率',
          'value':['经常','从不','偶尔','很少',],
           }
           var formdata_device={
          'tag':'设备类型',
          'value':['Windows','Mac','Linux','Android','IOS',],
           }
           var formdata_timeSlot={
          'tag':'浏览时段',
          'value':['1点-7点','8点-12点','13点-17点','18点-21点','22点-24点',],
           }
           var formdata_loginfrequency={
          'tag':'登陆频率',
          'value':['无','较少','一般','经常',],
           }
        //    var formdata_sex={
        //   'tag':'浏览商品',
        //   'value':['海尔电热水器EC6002-R','海尔波轮洗衣机XQB70-M1268 关爱','海尔原汁机众筹HYZ-101A',
        //   '海尔冰箱BCD-216SDN','海尔滚筒洗衣机XQG70-B12866','统帅彩电众筹D50MF5000',
        //   '海尔燃气灶JZT-QE3B(12T)','统帅投影仪众筹isee mini 1S','海尔波轮洗衣机XQB55-M1268 关爱',
        //   'MOOKA彩电 U50H7[mooka50寸全套餐]','海尔波轮洗衣机XQS70-Z9288 至爱','卡萨帝冰箱 BCD-346WSCV'],
        //    }
           var formdata_favorProduct={
          'tag':'商品偏好',
          'value':['海尔电热水器EC6002-R','海尔波轮洗衣机XQB70-M1268 关爱','海尔原汁机众筹HYZ-101A',
          '海尔冰箱BCD-216SDN','海尔滚筒洗衣机XQG70-B12866','统帅彩电众筹D50MF5000',
          '海尔燃气灶JZT-QE3B(12T)','统帅投影仪众筹isee mini 1S','海尔波轮洗衣机XQB55-M1268 关爱',
          'MOOKA彩电 U50H7[mooka50寸全套餐]','海尔波轮洗衣机XQS70-Z9288 至爱','卡萨帝冰箱 BCD-346WSCV'],
           }
           var formdata_favorBrand={
          'tag':'品牌偏好',
          'value':['海尔','卡萨帝','MOOKA','其他','统帅',],
           }

           var formdata_favorType={
          'tag':'品类偏好',
          'value':['电热水器','燃气灶','智能电视','微波炉',
          'Haier/海尔冰箱','4K电视','烟灶套系',
          '空气净化器','净水机','滤芯','电饭煲',
          '料理机','吸尘器/除螨仪','电磁炉','前置过滤器',
          '电水壶/热水瓶','LED电视','取暖电器','烤箱','嵌入式家电','嵌入式厨电','冷柜'],
           }
        //    var formdata_sex={
        //   'tag':'购买商品',
        //   'value':['海尔电热水器EC6002-R','海尔波轮洗衣机XQB70-M1268 关爱','海尔原汁机众筹HYZ-101A',
        //   '海尔冰箱BCD-216SDN','海尔滚筒洗衣机XQG70-B12866','统帅彩电众筹D50MF5000',
        //   '海尔燃气灶JZT-QE3B(12T)','统帅投影仪众筹isee mini 1S','海尔波轮洗衣机XQB55-M1268 关爱',
        //   'MOOKA彩电 U50H7[mooka50寸全套餐]','海尔波轮洗衣机XQS70-Z9288 至爱','卡萨帝冰箱 BCD-346WSCV'],
        //    }
           var that=this
          this.$axios.post('/api/userList/CountSearch',formdata_sex)
          .then(res=>{   
            // console.log(res)
            // console.log(res.data)
            var temp=JSON.stringify(res.data)
            var obj = JSON.parse(temp);
            console.log(obj)
            console.log(typeof(obj))
            console.log(obj.key)
          })
          this.$axios.post('/api/userList/CountSearch',formdata_consumeAbility)
          .then(res=>{   
            console.log(res)
            that.getchart()
          })
          


    },
    
    methods:{
        getchart(){

            var option_sex={
                title: {
                text: '群体男女比例',
                left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '50%',
                        // data: [
                        //     {value: 1048, name: '男'},
                        //     {value: 735, name: '直接访问'},
                        //     {value: 580, name: '邮件营销'},
                        //     {value: 484, name: '联盟广告'},
                        //     {value: 300, name: '视频广告'}
                        // ],
                        data:[
                            {value: 41, name: '男'},
                            {value: 52, name: '女'},
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            var option_age = {
                title: {
                    text: '年龄分布',
                    left: 'center',
                    top: 'top'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}%'
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    top: 'center',
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['50后', '60后', '70后', '80后', '90后','00后','10后','20后']
                },

                series: [
                    {
                        name: '漏斗图',
                        type: 'funnel',
                        width: '40%',
                        height: '70%',
                        left: '25%',
                        top: '20%',
                        funnelAlign: 'right',

                        center: ['50%', '50%'],  // for pie

                        data: [
                            {value: 1, name: '50后'},
                            {value: 1, name: '60后'},
                            {value: 22, name: '70后'},
                            {value: 24, name: '80后'},
                            {value: 25, name: '90后'},
                             {value: 22, name: '00后'},
                              {value: 1, name: '10后'},
                               {value: 1, name: '20后'},
                        ]
                    },
                    
                    
                ]
            }
            var option_politicalFace = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 32, name: '党员'},
                            {value: 29, name: '群众'},
                            {value: 31, name: '无党派人士'},
                           
                        ]
                    }
                ]
            }
            var option_nationality={
                xAxis: {
                type: 'category',
                data: ['中国大陆', '中国台湾', '中国澳门', '中国台湾', '其他',]
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [93, 0, 0, 0, 0,],
                type: 'line'
            }]
            }
            var option_internal={
                 xAxis: {
                type: 'category',
                data: ['7日','1月', '2周', '2月', '3月', '4月', '5月', '6月']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [0.0, 0, 0, 0, 1, 5, 0],
                type: 'line',
                symbol: 'triangle',
                symbolSize: 20,
                lineStyle: {
                    color: '#5470C6',
                    width: 4,
                    type: 'dashed'
                },
                itemStyle: {
                    borderWidth: 3,
                    borderColor: '#EE6666',
                    color: 'yellow'
                }
            }]
            }
            var option_consumeAbility={
                title: {
                
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}%"
            },
            
            legend: {
                data: ['超高','高','中','中上','中下','低','很低']
            },

            series: [
                {
                    name:'漏斗图',
                    type:'funnel',
                    left: '10%',
                    top: 60,
                    //x2: 80,
                    bottom: 60,
                    width: '80%',
                    // height: {totalHeight} - y - y2,
                    min: 0,
                    max: 100,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    labelLine: {
                        length: 10,
                        lineStyle: {
                            width: 1,
                            type: 'solid'
                        }
                    },
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    emphasis: {
                        label: {
                            fontSize: 20
                        }
                    },
                    data: [
                        {value: 0, name: '中'},
                        {value: 1, name: '中上'},
                        {value: 1, name: '中下'},
                        {value: 2, name: '低'},
                        {value: 0, name: '很低'},
                        {value: 65, name: '超高'},
                        {value: 24, name: '高'}
                    ]
                }
            ]
            }

            var mychart_sex=this.$echarts.init(document.getElementById('mychart_sex'));
            mychart_sex.setOption(option_sex)

            var mychart_age=this.$echarts.init(document.getElementById('mychart_age'));
            mychart_age.setOption(option_age)

            var mychart_politicalFace=this.$echarts.init(document.getElementById('mychart_politicalFace'));
            mychart_politicalFace.setOption(option_politicalFace)

            var mychart_nationality=this.$echarts.init(document.getElementById('mychart_nationality'));
            mychart_nationality.setOption(option_nationality)

            var mychart_internal=this.$echarts.init(document.getElementById('mychart_internal'));
            mychart_internal.setOption(option_internal)

            var mychart_consumeAbility=this.$echarts.init(document.getElementById('mychart_consumeAbility'));
            mychart_consumeAbility.setOption(option_consumeAbility)

            
            
    },
    parse(data){
        
    }
}
}
</script>

<style>
.box-card3 {
    width: 540px;
    border-radius: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 15px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }
</style>